<template>
        <div class="bar-wrap" v-if="show">
            <p ref="bar" class="loading-bar" :style="width"></p>
        </div>
</template>
    
<script setup lang='ts'>
import { computed, reactive, Ref, ref } from "vue";
let bar = ref<HTMLElement>();
let length = ref<number>(0);
let show: Ref<boolean> = ref(false);
let width = computed(() => {
    return {
        width: length.value + '%'
    }
})
console.log('bar:', bar);
let startLaoding = () => {
    show.value = true;
    const timer = window.requestAnimationFrame(function fn() {
        if (length.value < 95) {
            length.value += 1;
            window.requestAnimationFrame(fn)
        } else {
            window.cancelAnimationFrame(timer);
        };
    });
};
// startLaoding();
// setInterval(() => {console.log('111:', length.value)
//     if (length.value >= 89) {
//         endLoading()
//     }
// }, 1000);
let endLoading = () => {
    setTimeout(()=> {
        length.value = 100;
    }, 500);
    setTimeout(()=> {
        show.value = false;
    }, 600);
};
defineExpose({
    startLaoding,
    endLoading
})
    
</script>
    
<style>
.bar-wrap {
    width: 100vw;
    height: 5px;
    background: rgb(228, 228, 228);
    position: fixed;
    top: 0;
    left: 0;
}
.loading-bar {
    width: 20%;
    position: relative;
    top: 0;
    padding: 0;
    margin: 0;
    left: 0;
    height: 100%;
    border-radius: 5px;
    background-color: rgb(0, 146, 236);
}
</style>